👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

建立第一個布局模板

在 layouts 目錄下建立一個檔案 ./layouts/default.vue：

<template>
  <div class="bg-sky-100 py-6">
    <p class="px-6 py-2 text-2xl text-sky-600">
      這個藍色的背景是預設的布局，預計給全部的頁面做使用
    </p>
  </div>
</template>

在專案目錄下的 app.vue 檔案中，新增  元件。

 <template>
   <div>
      <NuxtLayout />
   </div>
 </template>

在布局模板添加預設 (slot)

修改 ./layouts/default.vue 檔案，添加 未具名的插槽，作為預設插槽：

<template>
  <div class="bg-sky-100 py-6">
    <p class="px-6 py-2 text-2xl text-sky-600">
      這個藍色的背景是預設的布局，預計給全部的頁面做使用
    </p>
    <slot />
  </div>
</template>

修改 app.vue 檔案：

<template>
  <div>
    <p class="my-2 px-2 text-2xl text-gray-700">這裡是最外層 app.vue</p>
    <div>
      <NuxtLayout>
        <p class="px-12 py-6 text-xl text-rose-500">
          被 NuxtLayout 包裹的元件將會放置到 Layout 的預設 slot 插槽中
        </p>
      </NuxtLayout>
    </div>
  </div>
</template>

建立多個插槽 (slot)

修改 ./layouts/default.vue 檔案，在預設布局模板建立 header 與 footer 插槽：

<template>
  <div class="bg-sky-100 py-6">
    <p class="px-6 py-2 text-2xl text-sky-600">
      這個藍色的背景是預設的布局，預計給全部的頁面做使用
    </p>
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>

修改 app.vue 檔案：

<template>
  <div>
    <p class="my-2 px-2 text-2xl text-gray-700">這裡是最外層 app.vue</p>
    <NuxtLayout>
      <template #header>
        <p class="px-12 text-green-500">這段文字會顯示 header 插槽</p>
      </template>
      <template #default>
        <p class="px-12 py-6 text-xl text-rose-500">
          被 NuxtLayout 包裹的元件將會放置到 Layout 的預設 slot 插槽中
        </p>
      </template>
      <template #footer>
        <p class="px-12 text-sky-500">這段文字會顯示 footer 插槽</p>
      </template>
    </NuxtLayout>
  </div>
</template>

建立路由頁面結合布局模板

在 pages 目錄下建立檔案 ./pages/index.vue：

<template>
  <div class="m-6 bg-slate-50 py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-sky-400">2023 iThome</h1>
      <p class="mt-4 text-9xl font-bold text-gray-600">鐵人賽</p>
    </div>
  </div>
</template>

修改 app.vue 檔案：

<template>
  <div>
    <p class="my-2 px-2 text-2xl text-gray-700">這裡是最外層 app.vue</p>
    <NuxtLayout>
      <NuxtPage />  
    </NuxtLayout>
  </div>
</template>

多個路由頁面共用預設布局模板

在 pages 目錄下建立檔案 ./pages/about.vue：

<template>
  <div class="m-6 mb-4 bg-slate-50 py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-yellow-400">大家好！我是 Ryan</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /about</p>
    </div>
  </div>
</template>

在 pages 目錄下建立檔案 ./pages/contact.vue：

<template>
  <div class="m-6 mb-4 bg-slate-50 py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-rose-400">如果沒事不要找我 xDDD</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /contact</p>
    </div>
  </div>
</template>

調整 ./pages/index.vue 檔案，添加兩個路由連結：

<template>
  <div class="m-6 bg-slate-50 py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-sky-400">2023 iThome</h1>
      <p class="mt-4 text-9xl font-bold text-gray-600">鐵人賽</p>
    </div>
    <div class="flex flex-col items-center">
      <div class="my-4 flex space-x-4">
        <NuxtLink to="/about">前往 About</NuxtLink>
        <NuxtLink to="/contact">前往 Contact</NuxtLink>
      </div>
    </div>
  </div>
</template>

建立多個布局模板

在 layouts 目錄下建立檔案 ./layouts/customLayout.vue：

<template>
  <div class="bg-rose-100 py-6">
    <p class="px-6 py-2 text-2xl text-rose-600">
      這個紅色的背景表示使用 custom-layout 布局，布局檔案 customLayout.vue
    </p>
    <slot />
  </div>
</template>

編輯 ./pages/about.vue 檔案，添加 definePageMeta 來設定使用 customLayout 布局：

<script setup>
definePageMeta({
  layout: 'custom-layout'
})
</script>

編輯 ./pages/contact.vue 檔案，添加 definePageMeta 來取消套用使用布局模板：

<script setup>
definePageMeta({
  layout: false
})
</script>

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 建立布局模板

參考資料

• Nuxt Layouts Directory